<template>
  <div class="content">
    <header>在线支付</header>

    <h3>订单信息：</h3>
    <div class="business-info" id="business-info" @click="changeshow()">
      <p>
        {{business.businessName}}
        <i class="fa fa-caret-down"></i>
      </p>
      <p>&#165;{{orders.orderTotal}}</p>
    </div>

    <!-- 订单列表 -->
    <ul id="order-list" v-show="showflag">
      <li v-for="(item,index) in orders.list" :key="index">
        <p>{{item.food.foodName}} x {{item.quantity}}</p>
        <p>&#165;{{item.food.foodPrice}}</p>
      </li>
      <li>
        <p>配送费</p>
        <p>&#165;{{business.deliveryPrice}}</p>
      </li>
    </ul>

    <!-- 支付方式 -->
    <ul class="pay-type">
      <li>
        <el-radio v-model="radio" label="1">
          <img src="../assets/alipay.png" alt />
        </el-radio>
      </li>
      <li>
        <el-radio v-model="radio" label="2">
          <img src="../assets/wechat.png" alt />
        </el-radio>
      </li>
    </ul>

    <div class="confirm-pay">
      <button @click="gotopay()">确认支付</button>
    </div>

    <!-- 支撑部分 -->
    <div class="footer-top"></div>
    <Footer></Footer>
    <el-dialog :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
      <span>
        <img
          src=""
        />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" v-show="!ishow">支付失败,退出支付</el-button>
        <el-button type="primary" @click="paysuccess()" v-show="ishow">支付成功，点此刷新页面</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
import Footer from "../components/Footer";
export default {
  name: "Payment",
  components: {
    Footer
  },
  data() {
    return {
      orderSn: this.$route.query.orderSn,
      orders: {},
      business: {},
      showflag: false,
      radio: "1",
      dialogVisible: false,
      ishow:false,
      count:10
    };
  },
  created() {
    this.$axios
      .get(
        "/OrdersController/getOrdersById/"+this.orderSn
      )
      .then(response => {
        this.orders = response.data.data;
        this.business = this.orders.business;
      })
      .catch(error => {
        console.log(error);
      });
  },
  mounted() {
    //把当前页路由添加到history对象中
    history.pushState(null, null, document.URL);
    //绑定popState 事件监听history对象的变化
    window.onpopstate = () => {
      //强制回退到首页
      this.$router.push("/");
    };
    // 每隔10秒绑定的key值改变一次，因此会重新渲染一次
  },
  destroyed() {
    window.onpopstate = null;
  },
  methods: {
    changeshow() {
      this.showflag = !this.showflag;
    },
    gotopay() {
      console.log(this.radio);
      this.dialogVisible = true;
      var countDown = setInterval(()=>{
            if(this.count < 5){
              this.ishow=true
            }else{
              this.ishow=false
              console.log(this.count)
              this.count-=1
            }
          },1000);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    paysuccess(){
        this.$axios
          .put(
            "/OrdersController/setOrderSuccess/"+this.orderSn
          )
          .then((response) => {
                let count = response.data.data;
                if(count>0){
                    alert("支付成功");
                    this.$router.push({path:'/historyorders'});
                }else{
                    alert("支付失败");
                }

          })
          .catch((error) => {
            console.log(error);
          });
        this.dialogVisible = false;
    }
  }
};
</script>


<style scoped>
/* 总容器 */
.content {
  width: 100%;
  height: 100%;
}
/* 头部 */
.content header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  font-size: 4.8vw;
  color: #fff;
  text-align: center;
  line-height: 12vw;
  position: fixed;
  top: 0vw;
  left: 0vw;
  z-index: 999;
}

.footer-top {
  width: 100%;
  height: 12vw;
}

.content h3 {
  margin-top: 12vw;
  box-sizing: border-box;
  padding: 4vw 4vw 0 4vw;
  font-size: 4vw;
  font-weight: 300;
  color: #999;
}
.content .business-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 4vw;
  font-size: 4vw;
  color: #666;
}
.content .business-info p:last-of-type {
  color: orangered;
}
.content #order-list {
  font-size: 3vw;
  color: #666;
}
.content #order-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 1vw 4vw;
}
.content .pay-type li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 4vw;
  font-size: 5vw;
}
.content .pay-type li i {
  color: #38ca73;
}
.content .pay-type li img {
  width: 33vw;
  height: 8.9vw;
}
.content .confirm-pay {
  box-sizing: border-box;
  padding: 4vw;
}
.content .confirm-pay button {
  width: 100%;
  height: 10vw;
  border: none;
  outline: none;
  background-color: #38ca73;
  border-radius: 4px;
  color: #fff;
}
</style>